<template>
	<!-- 确认订单 -->
	<view class="top">
		<!-- 顶部蓝色背景 -->
		<view class="CM-top"></view>
		<!-- 中间白色部分 -->
		<view class="ditubaibian">
			<!-- 服务状态 -->
			<view class="suatus">
				<liu-step-bar :stepList="stepList" @clickStep="clickStep"></liu-step-bar>
			</view>
			<!-- 预约信息 -->
			<view class="reservationInformation">
				<!-- 第一行 -->
				<view class="reservationInformation-one">
					<view class="ico-one">
						<image class="shop-ico" src="/static/CarMaintenance/商家.png" />
					</view>
					<view class="shopname">{{shopname}}</view>
					<view class="shopaddress">{{address}}</view>
				</view>
				<!-- 第二行 -->
				<view class="reservationInformation-two">
					<view class="ico-one">
						<image class="shop-ico" src="/static/CarMaintenance/人员.png" mode=""></image>
					</view>
					<view class="peoplename">
						{{peoplename}}
					</view>
					<view class="people-phone">
						{{phone}}
					</view>
				</view>
				<!-- 第三行 -->
				<view class="reservationInformation-three" @click="showPicker">
					<view class="ico-one">
						<image class="shop-ico" src="/static/CarMaintenance/车辆-01.png"></image>
					</view>
					<view style="font-weight: 600; line-height: 60rpx; float: left;">
						立即预约
					</view>
					<view class="a" style="">
						<image class="jiantou" src="/static/CarMaintenance/收起箭头小.png" mode=""></image>
					</view>
				</view>
				<!-- 第四行 -->
				<view class="reservationInformation-four" @click="navigateToMyCarList">
					<view class="ico-one">
						<image class="shop-ico" src="/static/CarMaintenance/车辆-01(1).png"></image>
					</view>
					<view style="font-weight: 600; line-height: 60rpx; float: left;">
						{{carname}}/{{carnumber}}
					</view>
					<view class="a">
						<image class="jiantou" src="/static/CarMaintenance/收起箭头小.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 服务产品列表 -->
			<view class="serviceList">
				<view class="serviceList-one">
					<view class="serviceList-one-left">
						服务产品
					</view>
					<view class="serviceList-one-right">
						共选择<text>{{much}}</text>服务产品
					</view>
				</view>
				<view class="carePackages" v-for="item in CarePackage" :key="item.name">
					<view class="package">
						{{item.name}} <text>￥{{item.money}}</text>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="voucher" @click="navigateToWCoupon">
				<image class="voucher-ico" src="/static/CarMaintenance/优惠券.png" />
				<view class="voucher-text">
					代金券/优惠券
				</view>
				<view class="vouchermoneys">
					<image class="jiantou2" src="/static/CarMaintenance/收起箭头小.png" mode="" />
					<text>-{{vouchermoney}}元</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="Cbottom">
			<image class="kefu" src="/static/CarMaintenance/客服.png" mode="" @click="showContact"></image>
			<text class="lianxikefu" @click="showContact">联系客服</text>
			<button class="button" @tap="toOpen ">提交订单</button>
			<text class="heji">合计： ￥{{moneyAll}}</text>
		</view>
		<!-- 时间选择器对话框 -->
		<view v-if="showDialog" class="dialog">
			<view class="dialog-content">
				<text class="dialog-title">预约时间</text>
				<view v-for="(time, index) in appointmentTimes" :key="index" class="time-option"
					@click="selectTime(time)">
					<text>{{ time.date }} - {{ time.time }}</text>
				</view>
				<view class="dialog-buttons">
					<button @click="cancelAppointment" class="cancel-button">取消</button>
					<button @click="confirmAppointment" class="confirm-button">确定</button>
				</view>
			</view>
		</view>
		<!-- 联系客服对话框 -->
		<view v-if="showContactDialog" class="contact-dialog">
			<view class="contact-dialog-content">
				<text>{{ kefuphone }}</text>
				<button @click="copyPhone">复制号码</button>
				<button @click="cancelContact">取消</button>
			</view>
		</view>
		<!-- 支付弹框 -->
		<jpPwd ref="jpPwds" :money="moneyAll" payType="two" keyType="four" @completed="completed" @forget="forget">
		</jpPwd>
	</view>
</template>

<script>
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	export default {
		components: {
			jpPwd
		},
		data() {
			return {
				stepList: [{
					name: '服务预约',
					id: 1
				}, {
					name: '支付订单',
					id: 2
				}, {
					name: '门店服务',
					id: 3
				}], //步骤列表

				shopname: "伟业汽车美容店（人民路店）", //商铺名称
				address: "山阳区人民路中路33号", //商铺地址
				peoplename: "王先生", //用户姓名
				phone: "18437066270", //用户手机号
				carname: '林肯Z', //汽车型号
				carnumber: "豫A2G285", //车牌号
				much: "2项", //选择的服务产品数量
				CarePackage: [{
					name: "小保养套餐1(合成机油+机滤)",
					money: 39.9
				}, {
					name: "小保养套餐2(合成机油+机滤)",
					money: 49.9
				}],
				vouchermoney: 10, //优惠券价格
				moneyAll: "79.8", //支付价格

				showDialog: false, // 控制选择器显示
				appointmentTimes: [ // 预约时间列表
					{
						date: '3月13日（今天）',
						time: '14:00'
					},
					{
						date: '3月14日（明天）',
						time: '09:00'
					},
					{
						date: '3月15日（后天）',
						time: '09:00'
					},
					{
						date: '3月16日',
						time: '09:00'
					}
				],
				selectedTime: '', // 选中的时间
				showContactDialog: false, // 控制联系客服对话框显示
				kefuphone: "110120119", //联系客服电话
				money: 66
			}
		},
		methods: {
			//点击步骤
			clickStep(e) {
				console.log('所点击步骤信息:', e)
			},
			// 显示时间选择器
			showPicker() {
				this.showDialog = true;
			},
			// 选择时间
			selectTime(time) {
				this.selectedTime = time;
				console.log('选择的时间:', time);
			},
			// 确认预约
			confirmAppointment() {
				this.showDialog = false;
				console.log('预约已确认:', this.selectedTime);
			},
			// 取消预约
			cancelAppointment() {
				this.showDialog = false;
			},
			// 页面跳转方法
			navigateToPage(pageUrl) {
				uni.navigateTo({
					url: pageUrl,
					success: () => {
						console.log('页面跳转成功');
					},
					fail: (err) => {
						console.error('页面跳转失败:', err);
					}
				});
			},
			// 跳转到我的车辆列表页面
			navigateToMyCarList() {
				this.navigateToPage('/pages/washPro/myCart/myCart'); // 确保路径正确
			},

			// 页面跳转方法---优惠券
			navigateToWCoupon(pageUrl) {
				uni.navigateTo({
					url: pageUrl,
					success: () => {
						console.log('页面跳转成功');
					},
					fail: (err) => {
						console.error('页面跳转失败:', err);
					}
				});
			},
			// 跳转到我的车辆列表页面
			navigateToWCoupon() {
				this.navigateToPage('/pages/washPro/coupons/coupons'); // 确保路径正确
			},
			// 显示联系客服对话框
			showContact() {
				this.showContactDialog = true;
			},

			// 复制电话号码
			copyPhone() {
				uni.setClipboardData({
					data: this.phone,
					success: () => {
						uni.showToast({
							title: '号码已复制',
							icon: 'success'
						});
					}
				});
				this.showContactDialog = false
			},

			// 取消联系客服对话框
			cancelContact() {
				this.showContactDialog = false;
			},
			// 支付弹框
			toOpen() {
				this.$refs.jpPwds.toOpen()
			},
			completed(e) {
				if (e == '123456') {
					this.$refs.jpPwds.toCancel()
					this.navigateToWPaySuccess()
				} else {
					uni.showToast({
						title: '密码错误',
						icon: 'none',
						duration: 2000
					})
					this.$refs.jpPwds.backs()
				}
			},
			forget() {
				console.log('忘记密码')
			},
			// 支付成功后的跳转
			navigateToWPaySuccess() {
				this.navigateToPage('/pages/washPro/payment/payment?moneyAll=' + this.moneyAll); // 确保路径正确
			},
		}
	}
</script>

<style lang="scss">
	.top {}

	.CM-top {
		width: 750rpx;
		height: 350rpx;
		background-color: #3385FD;
		position: fixed;
	}

	.ditubaibian {
		width: 690rpx;
		height: 1050rpx;
		background-color: #ffffff;
		position: relative;
		top: 10rpx;
		margin: 0 auto;
		border-radius: 10px;
	}

	// 服务状态信息
	.suatus {
		width: 100%;
		height: 130rpx;
		border-bottom: 5px solid #e7e7e7;
		padding: 80rpx 0;

	}

	.page-main {
		height: auto;

		.step {
			margin-top: 30rpx;
			padding: 0 30rpx;
		}
	}

	// 预约信息样式
	.reservationInformation {
		width: 650rpx;
		height: 350rpx;
		margin-left: 20rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
		border-bottom: 3rpx solid #e3e3e3;
	}

	.reservationInformation-one {
		height: 100rpx;
		width: 100%;
		background-color: #ffffff;
	}

	.ico-one {
		height: 60rpx;
		width: 60rpx;
		float: left;
	}

	.shop-ico {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.shopname {
		font-weight: 600;
		padding-bottom: 10rpx;
	}

	.shopaddress {
		font-weight: 600;
		color: #A6A6A6;
	}

	.reservationInformation-two {
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
	}

	.peoplename {
		font-weight: 600;
		padding-bottom: 10rpx;
		line-height: 60rpx;
		float: left;
	}

	.people-phone {
		float: right;
		font-weight: 600;
		color: #A6A6A6;
		line-height: 60rpx;
	}

	.reservationInformation-three {
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
	}

	.jiantou {
		height: 40rpx;
		width: 40rpx;
		float: right;
		padding-top: 10rpx;
	}

	.reservationInformation-four {
		height: 80rpx;
		width: 100%;
		background-color: #ffffff;
	}

	// 服务产品信息
	.serviceList {
		width: 650rpx;
		margin-left: 20rpx;
	}

	.serviceList-one {
		margin-top: 20rpx;
		height: 100rpx;
		width: 100%;
	}

	.serviceList-one-left {
		font-weight: 600;
		float: left;
		font-size: 34rpx
	}

	.serviceList-one-right {
		font-weight: 600;
		float: right;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.serviceList-one-right text {
		color: #3385FD;
	}

	//循环展示所选服务列表
	.serviceList {
		border-bottom: 3rpx solid #e3e3e3;
	}

	.package {
		margin: 20rpx 0;
		font-weight: 600;
	}

	.package text {
		color: #FF7A54;
		font-weight: 700;
		margin-left: 20rpx;
	}

	// 优惠券列表
	.voucher {
		margin-left: 20rpx;
	}

	.voucher-ico {
		width: 60rpx;
		height: 40rpx;
		margin: 10rpx 10rpx;
		float: left;
		margin-top: 40rpx;
	}

	.voucher-text {
		font-weight: 700;
		margin: 10rpx 10rpx;
		line-height: 100rpx;
		float: left;
	}

	.vouchermoneys text {
		color: #FF7A54;
		float: right;
		margin-top: 40rpx;
		margin-right: 20rpx;
		font-weight: 700;
	}

	.jiantou2 {
		margin-top: 40rpx;
		height: 40rpx;
		width: 40rpx;
		float: right;
		margin-right: 10rpx;
	}

	.Cbottom {
		width: 750rpx;
		height: 150rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
	}

	.kefu {
		height: 60rpx;
		width: 60rpx;
		float: left;
		margin: 25rpx;
	}

	.lianxikefu {
		font-weight: 600;
		float: left;
		line-height: 120rpx;
	}

	.heji {
		color: #FF7A54;
		float: right;
		line-height: 120rpx;
		font-weight: 700;
		margin-right: 20rpx;
	}

	.button {
		width: 240rpx;
		height: 85rpx;
		border-radius: 50rpx;
		background-color: #3385FD;
		float: right;
		margin-top: 20rpx;
		color: #ffffff;
	}

	//时间选择器样式
	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog-content {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10px;
		text-align: center;
		width: 80%;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	}

	.dialog-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.time-option {
		padding: 15rpx;
		border-bottom: 1px solid #e3e3e3;
		cursor: pointer;
		font-size: 16px;
	}

	.time-option:hover {
		background-color: #f0f0f0; // 鼠标悬停效果
	}

	.dialog-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.cancel-button,
	.confirm-button {
		width: 45%;
		height: 80rpx;
		border-radius: 5px;
		color: #ffffff;
	}

	.cancel-button {
		background-color: #ff4d4f; // 取消按钮颜色
	}

	.confirm-button {
		background-color: #3385FD; // 确定按钮颜色
	}

	// 联系客服弹框样式
	.contact-dialog {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 20rpx;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	}

	.contact-dialog-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.contact-dialog-content text {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.contact-dialog button {
		width: 100%;
		height: 100rpx;
		border-radius: 5px;
		line-height: 100rpx;
		background-color: #ffffff;
	}
</style>